<template>
  <view
    class="c-falls-box"
    :style="{
      'grid-template-columns': `repeat(${column},1fr)`,
      'grid-column-gap': columnGap,
    }"
  >
    <slot v-bind:data="fallsList"></slot>
  </view>
</template>

<script setup lang="ts">
import {
  defineProps,
  watchEffect,
  watchSyncEffect,
  watch,
  reactive,
  toRefs,
} from "vue";
const props = defineProps({
  column: {
    type: [String, Number],
    default: 1,
  },
  list: {
    type: Array,
    default: () => [],
  },
  columnGap: {
    type: String,
    default: "10rpx",
  },
});
watch(
  () => props.list,
  (n) => {
    if (n && n.length) {
      state.fallsList = splitArray(n);
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => props.column,
  (n) => {
    if (n && props.list && props.list.length) {
      state.fallsList = splitArray(props.list);
    }
  }
);

const state = reactive({
  fallsList: [],
  key: ["a", "b", "c", "d", "e", "f"],
});

const { fallsList } = toRefs(state);
const splitArray = (array: any[]) => {
  var result: any = [];
  let column = parseInt(props.column as string) || 1;
  for (let i = 0; i < column; i++) {
    result.push([]);
  }
  var index = 0; // 用于追踪当前数组的索引
  for (var i = 0; i < array.length; i++) {
    result[index].push(array[i]); // 将当前元素添加到当前数组

    index++; // 移动到下一个数组
    if (index === column) {
      index = 0; // 如果已经到达最后一个数组，则重置索引为0
    }
  }
  return result;
};
</script>

<style lang="scss" scoped>
.c-falls-box {
  display: grid;
}
</style>